<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>横向列表模式的导航菜单</title>
		<style type="text/css">
			<style type="text/css">#nav {
				width: 360px;
				/*设置菜单水平显示的宽度*/
			}

			#nav ul {
				/*设置列表的类型*/
				list-style-type: none;
				/*不显示项目符号*/
				margin: 0px;
				/*外边距为0px*/
				padding: 0px;
				/*内边距为0px*/
			}

			#nav li {
				float: left;
				/*使得菜单项都水平显示*/
			}

			#nav li a {
				display: block;
				/*块级元素*/
				padding: 3px 6px 3px 6px;
				text-decoration: none;
				/*链接无修饰*/
				border: 1px solid #711515;
				/*超链接区块四周的边框线效果相同*/
				margin: 2px;
			}

			#nav li a:link,
			#nav li a:visited {
				/*未访问过的链接、访问过的链接的样式*/
				background-color: #c11136;
				/*改变背景色*/
				color: #fff;
				/*改变文字颜色*/
			}

			#nav li a:hover {
				/*鼠标悬停于菜单项上时的样式*/
				background-color: #990020;
				/*改变背景色*/
				color: #ff0;
				/*改变文字颜色*/
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<ul>
				<li><a href="#">公司首页</a></li>
				<li><a href="#">合作案例</a></li>
				<li><a href="#">新闻中心</a></li>
				<li><a href="#">人才招聘</a></li>
				<li><a href="#">关于我们</a></li>
			</ul>
		</div>
	</body>
</html>
